<template>
  <div class="relative">
    <video
      ref="video"
      class="web__msg--video"
      :src="src"
      @play="videoPlay($event)"
      @pause="videoPause($event)"
      @click="showDialog"
      @canplaythrough="load('video')"
    />
    <div class="video-item" :class="{'hidden' : !isPlay }" @click="handleVidoePlay">
      <img style="width: 30px; height: 34px;" src="../../assets/images/play.png" alt="">
    </div>
    <el-dialog
      :visible.sync="show"
      width="40%"
      append-to-body
      :before-close="handleClose"
      class="web__dialog"
    >
      <video
        :src="src"
        style="width: 100%; object-fit: cover"
        controls="controls"
      ></video>
    </el-dialog>
  </div>
</template>
<script>
export default {
  props: {
    src: {
      type: String,
      default: ''
    },
  },
  data() {
    return {
      isPlay: true,
      loadState: false,
      show: false
    }
  },
  methods: {
    load(type) {
      if (this.loadState)
          return;
      this.loadState = true;
      this.$emit("load", type);
    },
    videoPlay(e) {
        // console.log('play', e);
        this.isPlay = false;
    },
    handleVidoePlay(e) {
        this.$refs.video.play();
    },
    videoPause(e) {
        this.isPlay = true;
    },
    showDialog() {
      this.show = true;
    },
    handleClose(done) {
      done();
  },
  },
}
</script>
<style scoped>
.relative {
  position: relative;
  width: 100%;
  height: 100%;
}
.video-item {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.05);
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 20px;
  z-index: 1;
  top: 0;
}

.hidden {
  display: none;
}

.web__msg--video{
  max-width: 250px;
  min-width: 50px;
  min-height: 50px;
  width: 100%;
  /* margin: 10px 0;
  border: 1px solid #eee; */
  overflow: hidden;
  border-radius: 5px;
  cursor: pointer;
  display: block;
}
  
</style>